<template>
	<view class="h_page">
		<!-- 个人仓库 -->
		<view class="h_tabs">
			<view class="h_active">库存</view>
			<view class="">已出库</view>
		</view>
		<view class="h_tabs">
			<view :class="params.is_company?'h_active':''" @click="tab2Click(1)">公司配件</view>
			<view :class="!params.is_company?'h_active':''" @click="tab2Click(2)">个人配件</view>
			<view class="" @click="tab2Click(3)">申购配件</view>
		</view>
		<view class="h_addBtn">
			<view class="h_add" @click="Jump('./PartsApplyLogList/index')">公司配件申领</view>
		</view>
		<view class="h_container">
			<view class="h_search">
				<input type="type" placeholder="关键词" 	confirm-type="search" @bindconfirm="bindconfirm">
				<view class="h_btn" @click="bindconfirm">查询</view>
			</view>
			<view class="h_name">{{userInfo.username}}仓库</view>
			<view class="h_list">
				<view class="h_L">
					<text v-for="(item,index) in CategoryList" :key="index" :class="item.id==params.category_id1?'h_active':''" @click="CategoryClick(index,item.id)">{{item.name}}</text>
				</view>
				<view class="h_R">
					<view class="h_type" v-if="CategoryList[CategoryIndex].plist.length">
						<text :class="!params.category_id2?'h_active':''">全部</text>
						<text v-for="(item,index) in CategoryList[CategoryIndex].plist" :key="index" :class="item.id==params.category_id2?'h_active':''">{{item.name}}</text>
					</view>
					<view class="h_box" v-for="(item,index) in list" :key="index">
						<view class="h_img">
							<image :src="item.images" mode="widthFix"></image>
						</view>
						<view class="h_text">
							<view class="h_title">{{item.parts_name}}</view>
							<view class="h_desc">{{item.area}}->{{item.parts_type}}</view>
							<view class="h_btom">
								<view class="h_left">
									<view class="h_unitPrice">{{item.parts_price}}<text>元/个</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapGetters } from "vuex"
import { getPartsApplyCategory,getUserStorehousePaginate } from "@/api"
	export default {
		data() {
			return {
				params: {
					page: 1,
					is_company:1,	//	1公司配件 0个人配件
					category_id1:'',	//1级分类
					category_id2:'',	//2级分类
				},
				list:[],
				load_more:true,
				CategoryList:[
					{
						id:'',
						name:'全部',
						plist:[]
					}
				],
				CategoryIndex:0,
			}
		},
		onShow() {
			this.getCategory();		//获取配件分类
			this.getList()
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		methods: {
			//获取配件分类
			getCategory(){
				console.log(this.userInfo,11111111111)
				let that = this
				getPartsApplyCategory().then(res => {
					let data = res.data
					let newArr = data.map(item=>{
						return {
							id:item.id,
							name:item.name,
							plist:item.plist,
						}
					})
					that.CategoryList = [{
							id:'',
							name:'全部',
							plist:[]
						},...newArr]
				})
			},
			getList(){
				let that = this
				let params = that.params
				getUserStorehousePaginate(params).then(res => {
					let data = res.data.data;
					if(that.params.page == 1){
						that.list = []
					}
					that.list = that.list.concat(data);
					if(that.params.page >= data.last_page || that.list.length< 1){
						that.load_more = false;
					}
				})
				
			},
			tab2Click(e){
				let that = this
				if(e==1) that.params.is_company = 1
				if(e==2) that.params.is_company = 0
			},
			// 配件分类点击
			CategoryClick(index,id){
				let that = this
				that.CategoryIndex = index
				that.params.page = 1
				that.params.category_id1 = id
				that.getList()
			},
			Jump(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{background: #F2F4F6;}
	view{box-sizing: border-box;}
	.h_page{
		padding: 20rpx 0;
		.h_tabs{
			margin-bottom: 20rpx;
			display: flex;
			border: 2rpx solid #007aff;
			border-right: none;
			border-radius: 6rpx;
			overflow: hidden;
			view{
				width: 100%;
				line-height: 76rpx;
				text-align: center;
				color: #007aff;
				font-size: 30rpx;
				border-right: 2rpx solid #007aff;
				&.h_active{
					background: #007aff;
					color: #fff;
				}
			}
		}
		.h_addBtn{
			background: #fff;
			padding: 20rpx;
			.h_add{
				width: 50%;
				margin: 0 auto;
				border-radius: 6rpx;
				background: #007aff;
				color: #fff;
				font-size: 28rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
		.h_container{
			background: #fff;
			padding: 0 20rpx 20rpx;
			.h_search{
				width: 100%;
				display: flex;
				border: 1px solid #ddd;
				input{
					width: calc(100% - 160rpx);
					height: 80rpx;
					padding: 0 20rpx;
					font-size: 30rpx;
				}
				.h_btn{
					font-size: 28rpx;
					line-height: 80rpx;
					width: 160rpx;
					text-align: center;
					background: #eee;
				}
			}
			.h_name{
				font-size: 28rpx;
				background: #eee;
				padding: 20rpx;
				margin: 20rpx 0;
			}
			
			.h_list{
				display:flex;
				align-items: flex-start;
				.h_L{
					background: rgb(249,249,249);
					width: 200rpx;
					text{
						display: block;
						width: 100%;
						text-align: center;
						line-height: 80rpx;
						color: #999;
						font-size: 28rpx;
						border-bottom: 1px solid #ddd;		
						&.h_active{
							background-color: rgba(59,130,234,1);
							color: #fff;
						}
					}
				}
				.h_R{
					padding-left: 20rpx;
					width: calc(100% - 200rpx);
					.h_type{
						display: flex;
						flex-wrap: wrap;
						text{
							background: rgb(240,240,240);
							margin: 0px 10rpx 10rpx 0px;
							padding: 6rpx 16rpx;
							border-radius: 4px;
							font-size: 24rpx;
							line-height: 36rpx;
							color: #999;
						}
					}
					.h_box{
						display: flex;
						margin-bottom: 24rpx;
						.h_img{
							font-size: 0;
							width: 160rpx;
							margin-right: 10rpx;
							image{width: 100%;}
						}
						.h_text{
							position: relative;
							width: calc(100% - 170rpx);
							.h_title{
								color: rgba(59,130,234,1);
								font-size: 32rpx;
							}
							.h_desc{font-size: 24rpx;color: #999;}
							.h_btom{
								position: absolute;
								left: 0%;bottom: 0;
								.h_left{
									.h_unitPrice{
										color: #f00;
										font-size: 34rpx;
										text{color: #999;font-size: 24rpx;}
									}
								}
							}
						}
					}
					
				}
			}
		}
	}
</style>
